import React, { PureComponent } from 'react'
import {
  Checkbox, Col, Form, Input, Modal, Row, TreeSelect, Select,
} from 'antd'
import { ProTable } from '@/components'
import styles from './index.less'

const { Item } = Form
const { Option } = Select
export default class CheckModelModal extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      columns: [
        {
          title: '字段名',
          dataIndex: 'fieldName',
          width: '20%',
          key: 'fieldName',
        },
        {
          title: '字段描述',
          dataIndex: 'fieldDesc',
          width: '20%',
          key: 'fieldDesc',
        },
        {
          title: '字段类型',
          dataIndex: 'fieldType',
          width: '20%',
          key: 'fieldType',
        },
        {
          title: '是否必填',
          dataIndex: 'required',
          width: '15%',
          key: 'required',
          render: (text, record) => (
            <Checkbox
              disabled
              checked={record.required}
            />
          ),
        },
        {
          title: '是否分区',
          dataIndex: 'isPartition',
          width: '15%',
          key: 'isPartition',
          render: (text, record) => (
            <Checkbox
              disabled
              checked={record.isPartition}
            />
          ),
        },
      ],
      data: [],
    }

    this.form = React.createRef()
  }

  componentDidMount() {
  }

  closeModal = () => {
    this.setState({ visible: false })
  }

  // eslint-disable-next-line react/no-unused-class-component-methods
  openModal(data) {
    this.setState({
      visible: true,
      data: data.fields,
    }, () => {
      if (data.lifeCycle === -1) {
        data.lifeCycle = '永久'
      } else {
        data.lifeCycle += '天'
      }
      this.form.current.setFieldsValue(data)
    })
  }

  render() {
    const { visible, data } = this.state
    const { treeOptions, listDataSecret } = this.props
    return (
      <Modal
        title="查看"
        visible={visible}
        width={1020}
        onCancel={this.closeModal}
        footer={null}
      >
        <div className={styles.sub_title}>
          <span className={styles.sub_title_txt}>
            模型定义
          </span>
        </div>
        <Form
          ref={this.form}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
        >
          <Row gutter={100}>
            <Col span={12}>
              <Item
                label="模型中文名"
                name="cnName"
              >
                <Input
                  disabled
                />
              </Item>
            </Col>
            <Col span={12}>
              <Item
                label="模型英文名"
                name="enName"
              >
                <Input
                  disabled
                />
              </Item>
            </Col>
          </Row>
          <Row gutter={100}>
            <Col span={12}>
              <Item
                label="主题"
                name="themeId"
              >
                <TreeSelect
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  treeData={treeOptions}
                  placeholder="请选择主题"
                  treeDefaultExpandAll
                  disabled
                />
              </Item>
            </Col>
            <Col span={12}>
              <Item
                label="生命周期"
                name="lifeCycle"
              >
                <Input
                  disabled
                />
              </Item>
            </Col>
          </Row>
          {
            this.props.storageType === 'Sap' && (
              <Row gutter={100}>
                <Col span={12}>
                  <Item
                    label="Schema"
                    name="schema"
                  >
                    <Input
                      disabled
                    />
                  </Item>
                </Col>
              </Row>
            )
          }
          {/* <Row gutter={100}>
            <Col span={12}>
              <Item
                label="数据密级"
                name="dataSecretId"
              >
                <Select
                  disabled
                >
                  {
                    listDataSecret && listDataSecret.map(item => (
                      <Option value={item.id} key={item.id}>{item.secretName}</Option>
                    ))
                  }
                </Select>
              </Item>
            </Col>
          </Row> */}
        </Form>
        <div className={styles.sub_title}>
          <span className={styles.sub_title_line} />
          <span className={styles.sub_title_txt}>
            属性配置
          </span>
        </div>
        <ProTable
          columns={this.state.columns}
          loading={false}
          dataSource={data}
          showQuickJumper={false}
          showSizeChanger={false}
          pagination={false}
          scroll={{ y: 330 }}
        />
      </Modal>
    )
  }
}
